<template>
	<div>
		<Row :gutter="gutterNum">
			<i-col
				v-if="show(0)"
				:span="span">
				<Select
					ref="prov"
					v-model="currPro"
					:filterable="searchable"
					:placeholder="phHandled(0)"
					:size="size"
					:not-found-text="ndsHandled(0)"
					:disabled="disabled === undefined ? false : disHandled(0)"
					clearable
					transfer
					style="width:100%"
					@on-change="hasChange">
					<Option
						v-for="item in provList"
						:value="item"
						:key="item">{{ item }}</Option>
				</Select>
			</i-col>
			<i-col
				v-if="show(1)"
				:span="span">
				<Select
					ref="city"
					v-model="currCit"
					:filterable="searchable"
					:placeholder="phHandled(1)"
					:size="size"
					:not-found-text="ndsHandled(1)"
					:disabled="disabled === undefined ? false : disHandled(1)"
					clearable
					transfer
					style="width:100%"
					@on-change="hasChange">
					<Option
						v-for="item in cityList"
						:value="item"
						:key="item">{{ item }}</Option>
				</Select>
			</i-col>
			<i-col
				v-if="show(2)"
				:span="span">
				<Select
					ref="coun"
					v-model="currCou"
					:filterable="searchable"
					:placeholder="phHandled(2)"
					:size="size"
					:not-found-text="ndsHandled(2)"
					:disabled="disabled === undefined ? false : disHandled(2)"
					clearable
					transfer
					style="width:100%"
					@on-change="hasChange">
					<Option
						v-for="item in counList"
						:value="item"
						:key="item">{{ item }}</Option>
				</Select>
			</i-col>
			<i-col
				v-if="show(3)"
				:span="span">
				<Select
					ref="stre"
					v-model="currStr"
					:filterable="searchable"
					:placeholder="phHandled(3)"
					:size="size"
					:not-found-text="ndsHandled(3)"
					:disabled="disabled === undefined ? false : disHandled(3)"
					clearable
					transfer
					style="width:100%"
					@on-change="hasChange">
					<Option
						v-for="item in streList"
						:value="item"
						:key="item">{{ item }}</Option>
				</Select>
			</i-col>
		</Row>
		<slot/>
	</div>
</template>

<script>
import { pcaa } from 'area-data';
import util from 'src/utils/area';

const areaLinkageArr = util.levelArr;
const dataTypeArr = util.dataType;
export default {
	name: 'AlSelector',
	props: {
		gutter: {
			type: [String, Number],
			default: 10,
		},
		level: {
			type: [String, Number],
			default: 3,
			validator: val => util.oneOf(parseInt(val, 10), areaLinkageArr),
		},
		value: {
			type: Array,
			default() {
				return [];
			},
		},
		searchable: {
			type: Boolean,
			default: false,
		},
		dataType: {
			type: String,
			default: 'all',
			validator: val => util.oneOf(val, dataTypeArr),
		},
		auto: {
			type: Boolean,
			default: false,
		},
		placeholder: {
			type: [Array, String],
			default() {
				return this.defaultPlaceholder;
			},
		},
		size: {
			type: String,
			default: 'default',
		},
		notFoundText: {
			type: [String, Array],
			default() {
				return this.defaultnotFoundText;
			},
		},
		disabled: {
			type: [Boolean, Array, Number],
			default: false,
		},
	},
	data() {
		return {
			currPro: '',
			currCit: '',
			currCou: '',
			currStr: '',
			provList: pcaa['86'],
			cityList: {},
			counList: {},
			streList: {},
			provIndex: 0,
			cityIndex: 0,
			counIndex: 0,
			streIndex: 0,
			isInit: true,
			defaultPlaceholder: ['请选择省', '请选择市', '请选择县区', '请选择乡镇街'],
			defaultnotFoundText: ['无匹配省', '无匹配市', '无匹配县区', '无匹配乡镇街'],
			cloneValue: [],
		};
	},
	computed: {
		gutterNum() {
			if (typeof this.gutter === 'number') {
				return this.gutter;
			}
			return parseInt(this.gutter, 10);
		},
		showLevel() {
			return parseInt(this.level, 10);
		},
		span() {
			if (util.oneOf(this.showLevel, areaLinkageArr)) {
				return 24 / (this.showLevel + 1);
			}
		},
	},
	watch: {
		currPro(prov) {
			this.updateNextSelector('provIndex', 'provList', 'cityList', prov, 'currCit', 0);
			if (this.showLevel === 0 || (!pcaa[util.getIndex(pcaa['86'], prov)]) || !this.auto) {
				this.returnRes(0);
			}
		},
		currCit(city) {
			this.updateNextSelector('cityIndex', 'cityList', 'counList', city, 'currCou', 1);
			if (this.showLevel === 1 || (!pcaa[util.getIndex(this.provList, city)]) || !this.auto) {
				this.returnRes(1);
			}
		},
		currCou(coun) {
			this.updateNextSelector('counIndex', 'counList', 'streList', coun, 'currStr', 2);
			if (this.showLevel === 2 || !this.auto) {
				this.returnRes(2);
			}
		},
		currStr(str) {
			this.streIndex = util.getIndex(this.streList, str);
			if (this.showLevel === 3 || !this.auto) {
				this.returnRes(3);
			}
		},
		value() {
			this.init();
		},
	},
	// updated() {
	//     this.init();
	// },
	mounted() {
		this.init();
	},
	methods: {
		init() {
			if (this.value && this.value.length > 0) {
				this.cloneValue = this.value;
				/* eslint-disable-next-line no-restricted-globals */
				if (isNaN(parseInt(this.value[0], 10))) {
					if (util.getIndex(this.provList, this.value[0])) {
						[this.currPro] = this.value;
					}
				} else if (this.value[0]) {
					if (pcaa['86'][this.value[0]]) {
						this.currPro = pcaa['86'][this.value[0]];
						[this.provIndex] = this.value;
					}
				}
			} else {
				this.cloneValue = [];
				this.currPro = '';
				this.currCit = '';
				this.currCou = '';
				this.currStr = '';
			}
		},
		show(level) {
			if (level <= this.showLevel) {
				return true;
			}
			return false;
		},
		updateNextSelector(index, list, nextList, name, nextName, level) {
			if (level <= this.showLevel) {
				let nextSelected = '';
				if (this.isInit && this.value[level]) {
					const valueItem = this.value[level];
					/* eslint-disable */
					if (isNaN(parseInt(valueItem, 10))) {
						if (util.getIndex(this[list], this.value[level])) {
							name = valueItem;
						}
					} else if (Object.keys(this[list]).indexOf(this.value[level]) > -1) {
						if (level === 0) {
							name = pca['86'][this.value[level]];
						} else {
							name = pcaa[this.value[level - 1]][this.value[level]];
						}
                    }
                    /* eslint-enable */
				}
				this[index] = util.getIndex(this[list], name);
				if (pcaa[this[index]]) {
					if (this[index] === undefined) {
						this.$refs[nextList.substr(0, 4)].setQuery('');
					}
					this[nextList] = pcaa[this[index]];
					if (this.isInit && this.cloneValue[level + 1]) {
						const valueNextItem = this.cloneValue[level + 1];
						/* eslint-disable-next-line no-restricted-globals */
						if (isNaN(parseInt(valueNextItem, 10))) {
							if (util.getIndex(this[nextList], this.cloneValue[level + 1])) {
								nextSelected = this.cloneValue[level + 1];
							}
						} else if (Object.keys(this[nextList]).indexOf(this.cloneValue[level + 1]) > -1) {
							nextSelected = pcaa[this.cloneValue[level]][this.cloneValue[level + 1]];
						}
					}
					if (this.isInit && this.value.length !== 0) {
						this[nextName] = nextSelected || this.setNextSelect(index);
					} else if (!this.isInit && this.auto) {
						this[nextName] = nextSelected || this.setNextSelect(index);
					}
					if (this.isInit && level === this.showLevel) {
						this.returnRes(level);
					}
				} else {
					this[nextName] = '';
					this[nextList] = [];
				}
				if ((this[nextName] === '市辖区' && this.auto) || (this[nextName] === '市辖区' && this.value.length !== 0)) {
					this.updateNextSelector('cityIndex', 'cityList', 'counList', '市辖区', 'currCou', 1);
				}
			}
		},
		returnRes(level) {
			if (this.auto) {
				this.returnResArr(this.showLevel);
			} else {
				this.returnResArr(level);
			}
		},
		setNextSelect(index) {
			return pcaa[this[index]][Object.keys(pcaa[this[index]])[0]];
		},
		returnResArr(level) {
			const res = [];
			let i = 0;
			const codeArr = [this.provIndex, this.cityIndex, this.counIndex, this.streIndex];
			const nameArr = [this.currPro, this.currCit, this.currCou, this.currStr];
			if (this.dataType === 'name') {
				while (i <= level) {
					if (nameArr[i]) {
						res.push(nameArr[i]);
					}
					i += 1;
				}
			} else if (this.dataType === 'all') {
				while (i <= level) {
					if (codeArr[i] && nameArr[i]) {
						const item = {
							code: codeArr[i],
							name: nameArr[i],
						};
						res.push(item);
					}
					i += 1;
				}
			} else {
				while (i <= level) {
					if (codeArr[i]) {
						res.push(codeArr[i]);
					}
					i += 1;
				}
			}
			this.$emit('input', res);
			this.$emit('on-change', res);
		},
		hasChange() {
			this.isInit = false;
		},
		phHandled(level) {
			if (typeof this.placeholder === 'string' && this.placeholder !== '') {
				return this.placeholder;
			}
			if (this.placeholder && this.placeholder[level]) {
				return this.placeholder[level];
			}
			return this.defaultPlaceholder[level];
		},
		ndsHandled(index) {
			if (typeof this.notFoundText === 'string' && this.notFoundText !== '') {
				return this.notFoundText;
			}
			if (!this.notFoundText) {
				return this.defaultnotFoundText[index];
			}
			if (this.notFoundText[index]) {
				return this.notFoundText[index];
			}
			return this.defaultnotFoundText[index];
		},
		disHandled(level) {
			if (typeof this.disabled === 'number') {
				if (util.oneOf(this.disabled, areaLinkageArr)) {
					if (level >= this.disabled) {
						return true;
					}
					return false;
				}
			} else if (Array.isArray(this.disabled)) {
				let i = 0;
				let isDis = false;
				while (this.disabled[i]) {
					if (this.disabled[i] === level) {
						isDis = true;
						break;
					}
					i += 1;
				}
				return isDis;
			} else {
				return this.disabled;
			}
		},
	},
};
</script>
